<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>体育馆预约页面</title>
    <script src="https://code.jquery.com/jquery-3.6.4.js"></script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f1f1f1;
        }

        .container {
            background-color: white;
            padding: 20px;
            margin-top: 50px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            width: 80%;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .stadium {
            flex-basis: 38%;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
        }

        h2 {
            margin: 0 0 10px;
            font-size: 24px;
        }

        p {
            margin: 0;
            font-size: 16px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #3e8e41;
        }

        /* 弹出框 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        input[type="datetime-local"] {
            display: block;
            margin: 10px auto;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            width: 80%;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="container">
    <c:forEach items="${requestScope.inf}" var="entry">
    <div class="stadium">
        <h2>${entry.stadiumName}</h2>
        <p>介绍：${entry.description}</p>
        <p>开放时间：${entry.startTime} - ${entry.endTime}</p>
        <p>租借价格：${entry.rentalPrice} 元/小时</p>
        <p>已预约/总数：${entry.bookedNum}/${entry.stadiumNum}</p>
        <c:if test="${entry.isBooked == 0 && entry.bookedNum != entry.stadiumNum}">
            <form action="/stadium/user/reserve" method="POST">
                <input type="hidden" name="id" value="${entry.id}">
                <button id="reserveBtn${entry.id}" type="button">预约</button>
                <div id="modal${entry.id}" class="modal">
                    <div class="modal-content">
                        <span class="close" onclick="closeModal(${entry.id})">&times;</span>
                        <h3>${entry.stadiumName} 预约</h3>
                        <h2>请输入大于等于今日的日期</h2>
                        <label for="start${entry.id}">开始时间：</label>
                        <input type="datetime-local" id="startTime${entry.id}" name="start" required onchange="validateStartTime(${entry.id})">
                        <label for="end${entry.id}">结束时间：</label>
                        <input type="datetime-local" id="end${entry.id}" name="end" required onchange="validateStartTime(${entry.id})">
                        <label for="numOfPeople${entry.id}">预约人数：</label>
                        <input type="number" id="numOfPeople${entry.id}" name="reservedNumber" required min="1">
                        <input type="hidden" name="teamId" value="${entry.id}">
                        <input type="hidden" id="userId" name="userId" value="${entry.userId}">
                        <button type="submit">确定</button>
                    </div>
                </div>
            </form>
        </c:if>

        <c:if test="${entry.isBooked == 0 && entry.bookedNum == entry.stadiumNum}">
                <button id="reserveBtn${entry.id}" type="button" style="color: gray">预约</button>
            <form>
                <div id="modal${entry.id}" class="modal">
                    <div class="modal-content">
                        <span class="close" onclick="closeModal(${entry.id})">&times;</span>
                        已满<br><br>
<%--                        <button type="submit">确认</button>--%>
                    </div>
                </div>
            </form>
<%--                <div id="modal${entry.id}" class="modal">--%>
<%--                    <div class="modal-content">--%>
<%--                        <c:out value="已满">无可预约场馆</c:out>--%>
<%--                        <button type="submit">知道了</button>--%>
<%--                    </div>--%>
<%--                </div>--%>
        </c:if>

        <c:if test="${entry.isBooked != 0}">
        <form action="/stadium/user/cancel" method="POST">
            <input type="hidden" name="id" value="${entry.id}">
            <input type="hidden" name="userId" value="${entry.userId}">
            <button id="reserveBtn${entry.id}" type="button">已预约</button>
            <div id="modal${entry.id}" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closeModal(${entry.id})">&times;</span>
                    确认取消预约?<br><br>
                    <button type="submit">确认</button>
                </div>
            </div>
        </form>
        </c:if>
    </div>
    </c:forEach>
</div>
<button type="button" onclick="download()">下载附件</button>

<script>
    // 预约按钮点击事件
    <c:forEach items="${requestScope.inf}" var="entry">
    const modal${entry.id} = document.getElementById("modal${entry.id}");
    const reserveBtn${entry.id} = document.getElementById("reserveBtn${entry.id}");

    //打开弹窗
    reserveBtn${entry.id}.addEventListener("click", function() {
        modal${entry.id}.style.display = "block";
    });

    // 关闭弹出框
    function closeModal(id) {
        const modal = document.getElementById("modal" + id);
        modal.style.display = "none";
    }

    // 点击弹出框以外的区域也可关闭弹出框
    window.addEventListener("click", function(event) {
        if (event.target === modal${entry.id}) {
            modal${entry.id}.style.display = "none";
        }
    });

    </c:forEach>

    function download(){
        $.ajax({
            url: "http://localhost:8080/stadium/common/DownLoadAllStadiums",
            method: "GET",
            xhrFields: {
                responseType: 'blob'
            },
            success: function(data) {
                var a = document.createElement('a');
                var url = window.URL.createObjectURL(data);
                console.log(url)
                a.href = url;
                a.download = "Stadium.csv";
                document.body.append(a);
                a.click();
                window.URL.revokeObjectURL(url);
                $(a).remove();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log("Error:", errorThrown);
            }
        });
    }
    function validateStartTime(id) {
        // Get the value of the start time input field
        var startTime = document.getElementById("startTime" + id).value;

        // Get the current date and time
        var today = new Date();

        // Convert the start time string to a Date object
        var startDate = new Date(startTime);

        // Compare the start time with the current date and time
        if (startDate < today) {
            // If the start time is earlier than the current date and time, display an error message
            alert("预约时间应大于当前时间");
            // Clear the value of the start time input field
            document.getElementById("startTime" + id).value = "";
        }
    }

</script>
</body>
</html>

